<template>
  <div class="container">
    <draggable
      class="list-group"
      v-model="data.list"
      v-bind="data.dragOptions"
      @start="data.drag = true"
      @end="data.drag = false"
      item-key="order"
    >
      <template #item="{ element }" class="list-group-item">
        <slot></slot>
      </template>
    </draggable>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue'
import draggable from 'vuedraggable'
const props = defineProps({
  appList: {
    type: Array,
    default: [],
  },
})
const list = ref([...props.appList])

const data = reactive({
  drag: false,
  dragOptions: {
    animation: 500,
    group: 'description',
  },
})
</script>

<style scoped></style>
